import React from 'react'

import { HashRouter, Route, Link } from 'react-router-dom'


// 导入模块化样式
import sty from './css/app.module.scss'

// 导入组件
import HomeContainer from './components/home/HomeContainer'
import AboutContainer from './components/about/AboutContainer'
import MovieContainer from './components/movie/MovieContainer'

//导入antd所需组件
import { Layout, Menu, Breadcrumb } from 'antd';
const { Header, Content, Footer } = Layout;

export default class App extends React.Component {
    componentWillMount() {
        // console.log(window.location.hash.split('/')[1]);
    }
    render() {

        return (<HashRouter>
            <Layout className="layout" style={{ height: '100%' }}>
                <Header>
                    <div className={sty.logo} />
                    <Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={[window.location.hash.split('/')[1]]}
                        style={{ lineHeight: '64px' }}
                    >
                        <Menu.Item key="home">
                            <Link to="/home">主页</Link>
                        </Menu.Item>
                        <Menu.Item key="movie">
                            <Link to="/movie/in_theaters/1">电影</Link>
                        </Menu.Item>
                        <Menu.Item key="about">
                            <Link to="/about">关于</Link>
                        </Menu.Item>
                    </Menu>
                </Header>

                <Content style={{ background: '#fff', flex: 1 }}>
                    <Route path="/home" component={HomeContainer}></Route>
                    <Route path="/movie" component={MovieContainer}></Route>
                    <Route path="/about" component={AboutContainer}></Route>
                </Content>

                <Footer style={{ textAlign: 'center' }}>码代码的过程就是你提升的过程</Footer>
            </Layout>


        </HashRouter>

        )
    }

}